<template>
<!-- 会员卡页面 -->
  <div>
    <div class="box">
        <div class="div-1">
          <div class="div-1-left">
              <img :src="'http://101.43.223.224:8765/image/getImageById?id=' + avatarUrl" class="div-1-left-img">
          </div>
          <!-- v-for="item in memberList" :key='item.id' -->
          <div class="div-2">
              <p class="p1">{{userName}}</p>
              <p class="p2">会员卡还剩3天</p>
          </div>
        </div>
        <div class="div-3">
          <div class="div-3-1">
            <div class="div3-1-2">
            <!-- <img src="../../assets/monthMember.png"> -->
            <p>您的会员类型：{{ memberType }}</p>
            <p>您的会员时间：30天</p>
            <p>您的会员价格：30/元</p>
            </div>
          </div>
          <div class="div-3-2">
            <!-- <img src="../../assets/seasonMember.png"> -->
            <p>尊敬的月卡会员您好：</p>
            <p>您在本平台将享受所有课程免费畅学权益</p>
            <p>祝您学习愉快，感谢您的信任</p>
          </div>
          <div class="div-3-3">
            <!-- <img src="../../assets/yearsMember.png"> -->
            <img src="../../assets/monthMember.png" class="img1">
          </div>
        </div>
        <div class="div4">
          
        </div>
    </div>
    <!-- <el-card class="box-card"> -->
      
    <!-- </el-card> -->
  </div>
</template>
<script>
export default {
  name: 'MemberView',
  data () {
    return {
      memberList: []
    }
  },
  mounted () {
    this.memberListAll()
  },
  methods: {
    // 获取首页数据免费课程
    memberListAll() {
          this.$axios.get("/MemberVo/MemberVoList", {
            }).then(res => {
                if (res.data.flag){
                    this.memberList = res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },

  }
}
</script>

<style scoped>
  .img1{
    width: 90%;
    height: 100%;
  }
  .div3-1-2{
    height: 80%;
    width: 62%;
    /* background: red; */
    margin: 0 auto;
    text-align: left
  }
  .box {
    width: 100%;
    height: 420px;
    /* background-color: rgb(219, 227, 224);  */
  }
  .div-1 {
    width: 100%;
    height: 100px;
    /* background-color: rgb(255,229,188); */
  }
  .div-1-left {
    width: 100px;
    height: 100px;
    /* background-color: aqua; */
    float: left;
  }
  .div-1-left-img {
    width: 50px;
    height: 50px;
    /* background: blanchedalmond;  */
    /* margin-left: 10px; */
     margin-top: 25px;
    border-radius: 50%;
  }
  .div-2 {
    width: 200px;
    height: 100px;
    float: left;
    /* background: red; */
  }
  .p1 {
    font-size: 12px;
    text-align: left;
    margin-top: 28px;
  }
  .p2 {
    font-size: 16px;
    text-align: left;
    margin-top: -4px;
  }
  .div-3 {
    width: 100%;
    height: 160px;
    /* background-color: azure; */
    margin-top: 10px;
  }
  .div-3-1 {
    width: 320px;
    height: 160px;
    /* background: linear-gradient(0deg, rgba(255,248,238) 0%, rgba(253,203,174) 100%); */
    float: left;
  }
  .div-3-2 {
    width: 320px;
    height: 160px;
    /* background: linear-gradient(0deg, rgba(239,239,239) 0%, rgb(218,215,219) 100%); */
    float: left;
  }
  .div-3-3 {
    width: 320px;
    height: 160px;
    /* background: linear-gradient(0deg, rgb(254,239,216) 0%, rgb(239,184,130) 100%); */
    float: left;
  }
  /* .div-3-1 img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  } */
  .div4 {
    width: 100%;
    height: 140px;
    /* background-color: rgb(225, 234, 234); */
    margin-top: 10px;
  }




  /* .clearfix span{
    float: left;
  }
  .clearfix {
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 900px;
    margin: 0 auto;
  } */
  .box-1 {
    width: 100%;
    /* height: 100%; */
    /* float: left; */
    background-color: royalblue;
    /* margin-top: 40px; */
    /* text-align: left; */
  }
</style>
